<nz-spin [nzSpinning]="isSpinning" [nzDelay]="500" nzTip="Loading...">
<nz-card>
  <div class="configure-item">
    <p class="configure-title">基础信息</p>

    <div class="configure-control">
      <!-- 适用用户 -->
      <nz-form-item>
        <nz-form-label nzFlex="100px" nzRequired>适用用户</nz-form-label>
        <nz-form-control nzFlex="424px">
          <nz-checkbox-group [(ngModel)]="userTypeOptions" (ngModelChange)="logChange(userTypeOptions)"></nz-checkbox-group>
        </nz-form-control>
      </nz-form-item >

      <!-- 名称 -->
      <nz-form-item>
        <nz-form-label nzFlex="100px" nzRequired>名称</nz-form-label>
        <nz-form-control nzFlex="424px">
          <input nz-input maxlength="20" placeholder="请输入名称" [(ngModel)]="formParams.activityName" />
        </nz-form-control>
      </nz-form-item >

      <!-- 有效时间 -->
      <nz-form-item>
        <nz-form-label nzFlex="100px">有效时间</nz-form-label>
        <nz-form-control nzFlex="460px">
          <nz-date-picker
            [nzDisabledDate]="disabledStartDate"
            nzShowTime
            nzFormat="yyyy-MM-dd HH:mm:ss"
            [(ngModel)]="formParams.beginTime"
            nzPlaceHolder="请选择开始时间"
            (nzOnOpenChange)="handleStartOpenChange($event)">
          </nz-date-picker>
          <nz-date-picker
            #endDatePicker
            class="m-l-10"
            [nzDisabledDate]="disabledEndDate"
            nzShowTime
            nzFormat="yyyy-MM-dd HH:mm:ss"
            [(ngModel)]="formParams.endTime"
            nzPlaceHolder="请选择结束时间">
          </nz-date-picker>
          <i class="m-l-10" nz-icon nzType="exclamation-circle" nzTheme="outline" nz-tooltip [nzTooltipTitle]="tipStr"></i>
        </nz-form-control>
      </nz-form-item >

      <!-- 订单门槛 -->
      <nz-form-item>
        <nz-form-label nzFlex="100px" nzRequired>订单门槛</nz-form-label>
        <nz-form-control nzFlex="424px">
          <nz-input-number
            style="width: 207px;"
            [(ngModel)]="formParams.orderPrice"
            [nzMin]="0"
            [nzStep]="1"
            [nzPrecision]="0"
            nzPlaceHolder="请输入门槛">
          </nz-input-number>
        </nz-form-control>
      </nz-form-item >

      <!-- 备注 -->
      <nz-form-item>
        <nz-form-label nzFlex="100px">备注</nz-form-label>
        <nz-form-control nzFlex="424px">
          <nz-textarea-count [nzMaxCharacterCount]="100">
            <textarea rows="4" nz-input maxlength="100" placeholder="仅内部可见" [(ngModel)]="formParams.bak"></textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item >
    </div>
  </div>

  <div class="configure-item p-t-20">
    <p class="configure-title">
      奖品配置
    </p>

    <div class="configure-control">
      <p class="table-tip">
        * 奖品配置 拖动可排序。请保证<strong class="mcolor-red">至少</strong>有一个谢谢参与
        <!-- <span class="sum-txt">当前概率总和：{{ getProbabilityTotal() }}</span> -->
      </p>

      <div nz-row class="table-wrap">
        <nz-table
          nz-col
          nzSpan="16"
          #basicTable
          nzSize="small"
          nzBordered
          [nzShowPagination]="false"
          [nzData]="tableData">
          <thead>
            <tr>
              <th nzAlign="center">序号</th>
              <th nzAlign="center">名称</th>
              <th nzAlign="center">图标</th>
              <th nzAlign="center">奖品类型</th>
              <th nzAlign="center">奖品ID</th>
              <!-- <th nzAlign="center">概率(‱)</th> -->
              <th nzAlign="center">概率最小值</th>
              <th nzAlign="center">概率最大值</th>
              <th nzAlign="center">退单是否撤回</th>
              <th nzAlign="center">发放总量</th>
              <th nzAlign="center" *ngIf="routerParams.type == 1">剩余数量</th>
              <th nzAlign="center">操作</th>
            </tr>
          </thead>
          <tbody cdkDropList (cdkDropListDropped)="drop($event)">
            <tr *ngFor="let data of tableData; let index = index;" cdkDrag>
              <!-- 序号 -->
              <td nzAlign="center">{{ index + 1 }}</td>
              <!-- 名称 -->
              <td nzAlign="center">
                <input type="text" maxlength="8" nz-input placeholder="请输入名称" [(ngModel)]="data.name" />
              </td>
              <!-- 图标 -->
              <td nzAlign="center">
                <div class="img-wrap">
                  <nz-upload
                    class="avatar-uploader"
                    nzAccept="image/*"
                    nzAction=""
                    nzListType="picture-card"
                    (nzChange)="onModalPreview($event, index)"
                    [nzShowUploadList]="false">
                    <ng-container *ngIf="!data.imgUrl">
                        <i class="upload-icon" nz-icon [nzType]="data.loading ? 'loading' : 'plus'"></i>
                    </ng-container>
                    <img *ngIf="data.imgUrl" [src]="data.imgUrl" style="width: 100%" />
                    
                  </nz-upload>
                  <span *ngIf="data.imgUrl" class="delete-span" (click)="deleteImg(index)">x</span>
                </div>
              </td>
              <!-- 奖品类型 -->
              <td nzAlign="center">
                <nz-select
                  style="width: 100px;"
                  nzAllowClear
                  nzBorderless
                  nzPlaceHolder="请选择"
                  [(ngModel)]="data.type"
                  (ngModelChange)="typeChange($event, index)">
                  <nz-option [nzValue]="2" nzLabel="优惠券"></nz-option>
                  <nz-option [nzValue]="1" nzLabel="占位"></nz-option>
                  <nz-option [nzValue]="3" nzLabel="谢谢参与"></nz-option>
                  <nz-option [nzValue]="6" nzLabel="手动奖品"></nz-option>
                  <nz-option [nzValue]="7" nzLabel="二手优惠券"></nz-option>
                  <nz-option [nzValue]="8" nzLabel="回收加价券"></nz-option>
                </nz-select>
              </td>
              <!-- 奖品ID -->
              <td nzAlign="center">
                <input
                  type="text"
                  nz-input
                  placeholder="请输入奖品ID"
                  [(ngModel)]="data.couponNo"
                  [disabled]="data.type == 1 || data.type == 3 || data.type == 6"
                />
              </td>
              <!-- 概率
              <td nzAlign="center">
                <nz-input-number
                  [nzMin]="0"
                  [nzMax]="10000"
                  [nzPrecision]="0"
                  [nzStep]="1"
                  nzPlaceHolder="请输入"
                  [disabled]="data.type == 1"
                  [(ngModel)]="data.probability">
                </nz-input-number>
              </td> -->
              <!-- 概率最小值 -->
              <td nzAlign="center">
                <nz-input-number
                  [nzMin]="0"
                  [nzPrecision]="0"
                  [nzStep]="1"
                  nzPlaceHolder="请输入"
                  [disabled]="data.type == 1"
                  [(ngModel)]="data.minProbability">
                </nz-input-number>
              </td>
              <!-- 概率最大值 -->
              <td nzAlign="center">
                <nz-input-number
                  [nzMin]="0"
                  [nzPrecision]="0"
                  [nzStep]="1"
                  nzPlaceHolder="请输入"
                  [disabled]="data.type == 1"
                  [(ngModel)]="data.maxProbability">
                </nz-input-number>
              </td>
              <!-- 退单是否撤回 -->
              <td nzAlign="center">
                <nz-switch
                  nzCheckedChildren="是"
                  nzUnCheckedChildren="否"
                  [(ngModel)]="data.isChecked"
                  [disabled]="!data.type || data.type == 3 || data.type == 1 || data.type == 6">
                </nz-switch>
              </td>
              <!-- 发放总量 -->
              <td nzAlign="center">
                <nz-input-number
                  [nzMin]="0"
                  [nzPrecision]="0"
                  [nzStep]="1"
                  nzPlaceHolder="请输入"
                  [(ngModel)]="data.stock"
                  [disabled]="data.type == 1 || data.type == 3">
                </nz-input-number>
              </td>
              <!-- 剩余数量 -->
              <td *ngIf="routerParams.type == 1" nzAlign="center">
                {{ data.surplusNumber || '0' }}
              </td>
              <!-- 操作 -->
              <td nzAlign="center">
                <a
                  nz-button
                  nzType="link"
                  nzDanger
                  nz-popconfirm
                  nzPopconfirmTitle="确认清除?"
                  (nzOnConfirm)="clearItem(data, index)">
                  清除
                </a>
                <button nz-button nzType="link" class="drop-hover">
                  <i nz-icon nzType="drag" nzTheme="outline" cdkDragHandle></i>
                </button>
              </td>
            </tr>
          </tbody>
        </nz-table>

        <div nz-col nzSpan="8" class="p-l-15">
          <div class="square-wrap">
            <p class="start-p">开始抽奖</p>
            <ul class="square-ul">
              <li *ngFor="let item of tableData; let index = index;">
                <img
                  nz-image
                  width="50px"
                  height="50px"
                  [nzSrc]="item.imgUrl"
                  [nzFallback]="fallback"
                />
                <span>{{ item.name }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>    
  </div>

  <div class="operation-wrap">
    <button nz-button nzType="primary" class="m-r-10" [nzLoading]="subloading" (click)="subForm()">保存</button>
    <button nz-button nzType="default" (click)="back()">返回</button>
  </div>
  
  <!-- 提示 -->
  <div class="foot-tip">
    <dl>
      <dt>※  请注意：</dt>
      <dd>1，后端会根据配置状态和门槛值随机返回一个符合条件的抽奖配置；</dd>
      <dd>2，如果某项奖品的发放总量不足/发放失败，则会随机返回一个“谢谢参与”；</dd>
      <dd>3，谢参与的数量将不受配置的数量控制；</dd>
      <dd>4，如果设置了“退单撤回”，则已经消费的将无法撤回；</dd>
      <dd>5，抽奖的原理是随机一个1~10000的随机数x，当x落在【概率最小值 <= x < 概率最大值】的时候，就会抽中该项；</dd>
      <!-- <dd>5，概率这里是“万分之”请注意别填错了；</dd> -->
    </dl>
  </div>
</nz-card>
</nz-spin>